<template>
  <div>
    <!-- 个人中心页面 -->
    <div class="box">
      <div class="header">
        <!-- 个人中心最上面三个按钮 -->
        <van-row justify="space-around" class="button1">
          <van-col span="4"><button ><router-link to="/login">登录</router-link></button></van-col>
          <van-col span="4"><button><router-link to="/register">注册</router-link></button></van-col>
          <van-col span="4"><button @click="backLogin">退出登录</button></van-col>
        </van-row>
        <van-row justify="space-around" class="img-content">
          <!-- 头像 -->
          <van-col span="8">
            <van-uploader :after-read="afterRead" v-if="userInfo.user_pic === ''" />
            <img :src="userInfo.user_pic"  class="img1" v-else>
            <!-- <van-uploader :after-read="afterRead">
              <van-button type="primary" class="sctx">上传头像</van-button>
            </van-uploader> -->
          </van-col>
          <!-- 用户名与完善信息 -->
          <van-col span="8" class="span1">
            <p>用户名:  {{userInfo.username}}</p>
            <!-- 点击进入个人信息页面 -->
            <router-link :to="{path:'/userinfo',query:{id:userInfo.id}}">完善信息</router-link>
          </van-col>
        </van-row>
      </div>
      <div>
        <van-cell-group>
          <van-cell title="姓名" :value="userInfo.username" />
          <van-cell title="别名" :value="userInfo.nickname" />
          <van-cell title="邮箱" :value="userInfo.email" />
          <van-cell title="电话" :value="userInfo.phone" />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'User',
  data () {
    return {
      // 是否登录
      isup: false
    }
  },
  computed: {
    ...mapState(['tokenInfo']),
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    ...mapMutations(['cleanState']),
    // 上传头像
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      if (this.tokenInfo !== '') {
        this.user_pic = file.content
        this.putUserInfo(this.tokenInfo)
      } else {
        this.$toast('请先登录')
      }
    },
    // 更新头像
    async putUserInfo (tokenInfo) {
      const { data: res } = await this.$http({
        url: '/my/update/avatar',
        method: 'POST',
        headers: {
          'Access-Control-Allow-Origin': '*', // 解决cors头问题
          'Access-Control-Allow-Credentials': 'true', // 解决session问题
          Authorization: tokenInfo,
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: qs.stringify({ avatar: this.user_pic })
      })
      // console.log(res)
      // 上传头像错误时提示原因，成功进行提示
      if (res.status === 1) {
        if (res.message === 'request entity too large') {
          this.$toast('头像太大')
        } else {
          this.$toast('res.message')
        }
      } else {
        this.$toast('更新头像成功')
      }
    },
    // 退出登录
    backLogin () {
      this.cleanState()
      this.$toast('退出成功')
    },
    // 登录成功传token值
    getUser () {
      // console.log(this.tokenInfo)
      this.isup = true
      if (!this.isup) return false
      // console.log(this.tokenInfo)
      // console.log('c')
      this.getUserInfo(this.tokenInfo)
    },
    // 获取用户信息
    async getUserInfo (tokenInfo) {
      const { data: res } = await this.$http({
        url: '/my/userinfo',
        method: 'GET',
        headers: {
          'Access-Control-Allow-Origin': '*', // 解决cors头问题
          'Access-Control-Allow-Credentials': 'true', // 解决session问题
          Authorization: tokenInfo
        }
      })
      // console.log('b')
      // console.log(localStorage.getItem(tokenInfo))
      // console.log(res)
      // 信息存到vuex中
      if (res.status === 0) {
        // console.log('a')
        this.updateUserInfo(res.data)
      }
    }
  },
  created () {
    this.getUser()
  },
  activated () {
    this.getUser()
  }
}

</script>

<style lang="less" scoped>
@media screen and (min-width: 1280px) {
  .box{
    width: 70%;
    margin: auto;
  }
}

  a{
    color: black;
    text-decoration: none;
  }
  .box .header{
    padding: 10px;
  }
  .span1{
    .p{
      padding: 10px;
    }
  }
  .img-content{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .button1{
    button{
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 50px;
      border: 0px;
      background-color: none;
    }
  }
  .img1{
    width: 80px;
    height: 80px;
  }
  .sctx{
    width: 60px;
    font-size: 2px;
  }
</style>
